import React, { Component } from 'react'
import { connect } from 'react-redux'
import Header from '../../components/header/Header'
import './cate.css'
import { bindActionCreators } from 'redux'
import { actions, getcategoods, getcatelist, getn } from '../../store/modules/cate'
import { actions as detailactions } from '../../store/modules/detail'
class Cate extends Component {
    componentDidMount() {
        let { cate: { reqchangelist, reqcategoods } } = this.props
        reqchangelist()
        reqcategoods(1)
    }
    // componentDidUpdate(){
    //     let { cate: {reqcategoods } ,n} = this.props
    //     reqcategoods(n)
    // }
    // shouldComponentUpdate(nextProps,nextState){
    //     let {n} = this.props
    //     if(n===nextProps.n){
    //         return false
    //     }
    //     return true
    // }
    render() {
        let { list, categoods, cate: { reqcategoods }, n,detail:{reqlist} ,history} = this.props
        // console.log(list);
        // console.log(n);
        // console.log(categoods);
        return (
            <div className='Cate'>
                <Header title='商品分类'></Header>
                <div className="cate-top">
                    <div className='box'>
                        <input type="text" placeholder='按内容搜索' />
                        <i className='iconfont icon-sousuo'></i>
                        <button>搜索</button>
                    </div>
                </div>
                <div className='main'>
                    <div className="left">
                        <ul>
                            {
                                list.map((item, index) => (
                                    <li key={item.id} onClick={() => reqcategoods(item.id)} className={index + 1 === n ? 'select' : ''}>
                                        {item.catename}
                                    </li>
                                ))
                            }
                        </ul>
                    </div>
                    <div className='right'>
                        {
                            categoods.map(item => (
                                <div className='conlist' key={item.id} onClick={()=>reqlist(item.id,history)}>
                                    <img src={item.img} alt="pic" />
                                    <div className='wenzi'>
                                        <p> <i>限时 </i> {item.goodsname}</p>
                                        <div className='bottom'>
                                            <div className='fl'>
                                                <span>&yen; {item.price}</span>
                                                <span>&yen; {item.market_price}</span>
                                                <button>加入购物车</button>
                                            </div>
                                            <div className='fl'>
                                                <p>{item.description}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))
                        }
                    </div>
                </div>
            </div>
        )
    }
}
let mapStateToProps = state => ({
    list: getcatelist(state),
    categoods: getcategoods(state),
    n: getn(state),
})
let mapDispatchToProps = dispatch => ({
    cate: bindActionCreators(actions, dispatch),
    detail:bindActionCreators(detailactions,dispatch)
})
export default connect(mapStateToProps, mapDispatchToProps)(Cate)